<template>
  <div class="app-container">
    <FilterSearch :value="queryParams" :config="configData" layout="inline"></FilterSearch>
    <main>
      <div class="box-list">
        <div class="box" v-for="(item, index) in tableData.dataSource">
          <div class="head" @click="selectBoxList(item, index)">
            <div class="left">
              <div class="check">
                <a-checkbox v-model:checked="item.checked"></a-checkbox>
              </div>
              <div class="name">
                盒号: {{ item.caseNum }}
              </div>
            </div>
            <div class="right">
              <div class="status" @click="handleChange(item, 'inHome')">
                入库
              </div>
              <div class="num">
                {{ item.waitLibCount }}/{{ item.maxNum }}
              </div>
              <div class="icon">
                <CaretDownOutlined />
              </div>
            </div>
          </div>
          <div class="con" v-show="tableData.expand == index">
            <a-table :scroll="{ x: 1400 }" bordered :dataSource="tableData.modalDataSource"
              :columns="tableData.modalColumns" :loading="tableData.loading"
              :pagination="{ total: tableData.modalDataSource.length, showTotal: total => ` 总条数:${total}条`, defaultPageSize: 5 }">
              <template #bodyCell="{ column, index, record }">
                <template v-if="column.key === 'action'">
                  <a-button type="link" @click="handleChange(record, 'details')">
                    详情
                  </a-button>
                  <a-button type="link" @click="handleChange(record, 'record')">
                    操作记录
                  </a-button>
                </template>
                <template v-if="column.key === 'index'">
                  <span>
                    {{ (index + 1) }}
                  </span>
                </template>
                <template v-if="column.key === 'serviceType'">
                  <template v-for="item in typeOptions.options1">
                    <span v-if="record.serviceType == item.codeValue" color="#f50">{{ item.codeName }}</span>
                  </template>
                </template>
                <template v-if="column.key === 'serviceMode'">
                  <template v-for="item in typeOptions.options2">
                    <span v-if="record.serviceMode == item.codeValue" color="#f50">{{ item.codeName }}</span>
                  </template>
                </template>
              </template>
            </a-table>
          </div>
        </div>
        <div class="table-tips" v-if="tableData.dataSource.length == 0">
          暂无数据~
        </div>
        <div class="page">
          <a-pagination v-model:current="queryParams.pageNumber" :show-total="total => ` 总条数:${total}条`"
            v-model:pageSize="queryParams.pageSize" :total="tableData.total" @change="currentChange" />
        </div>
      </div>
    </main>
    <a-modal v-model:open="modalOpen.open1" style="width: 500px" title="入库" :maskClosable="false" :closable="false">
      <div class="modal-body">
        <div class="form">
          <a-form :rules="rules" :model="formState" ref="formRef" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
            <a-row>
              <a-col :span="24">
                <a-form-item label="盒号" name="caseNum">
                  <a-input v-model:value="formState.caseNum" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="档案存储地" name="stashId">
                  <a-select allowClear v-model:value="formState.stashId" @change="stashChange" style="width:33%;"
                    placeholder="请选择">
                    <a-select-option v-for="(item, index) in typeOptions.options11" :value="item.id" :key="index">
                      {{ item.stashName }}
                    </a-select-option>
                  </a-select>
                  <a-select allowClear v-model:value="formState.frameNum" @change="frameNumChange" style="width:33%;"
                    placeholder="请选择">
                    <a-select-option v-for="(item, index) in typeOptions.options12" :value="item.frameNum" :key="index">
                      {{ item.frameNum }}
                    </a-select-option>
                  </a-select>
                  <a-select allowClear v-model:value="formState.rowNumId" style="width:33%;" placeholder="请选择">
                    <a-select-option v-for="(item, index) in typeOptions.options13" :value="item.id" :key="index">
                      {{ item.rowNum }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="备注">
                  <a-textarea v-model:value="formState.remark" :auto-size="{ minRows: 3, maxRows: 3 }" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      <template #footer>
        <div class="modal-btns">
          <div class="modal-btn">
            <a-button @click="handleChange({}, 'inHomeOk')" type="primary">确认</a-button>
          </div>
          <div class="modal-btn">
            <a-button @click="cancel('inHome')">关闭</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <a-modal v-model:open="modalOpen.open2" style="width: 75%" title="档案详细信息" :maskClosable="false" :closable="false">
      <div class="modal-body">
        <div class="form">
          <a-form :model="formState" disabled :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off">
            <a-row>
              <a-col :span="24">
                <div class="tips">
                  基础信息
                </div>
              </a-col>
              <a-col :span="8">
                <a-form-item label="合同版本" name="contractVersion">
                  <a-input v-model:value="formState.contractVersion" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="合同号" name="contractNum">
                  <a-input v-model:value="formState.contractNum" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="授权方" name="authorizer">
                  <a-input v-model:value="formState.authorizer" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="承租人" name="lesseeName">
                  <a-input v-model:value="formState.lesseeName" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="挂靠公司" name="affiliatedCompany">
                  <a-input v-model:value="formState.affiliatedCompany" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="盒号" name="caseNum">
                  <a-input v-model:value="formState.caseNum" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="件号" name="partNum">
                  <a-input v-model:value="formState.partNum" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="排序号" name="orderNum">
                  <a-input v-model:value="formState.orderNum" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="档案存储地" name="fileLocation">
                  <a-input v-model:value="formState.fileLocation" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="档案状态" name="state">
                  <a-select allowClear v-model:value="formState.state">
                    <a-select-option v-for="(item, index) in typeOptions.options3" :value="item.codeValue"
                      :key="item.codeValue">
                      {{ item.codeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="是否正常" name="isNormal">
                  <a-select allowClear v-model:value="formState.isNormal">
                    <a-select-option v-for="(item, index) in typeOptions.options9" :value="item.codeValue"
                      :key="item.codeValue">
                      {{ item.codeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <div class="tips">
                  车辆信息
                </div>
              </a-col>
              <a-col :span="8">
                <a-form-item label="车辆品牌" name="vehicleBrand">
                  <a-input v-model:value="formState.vehicleBrand" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="车辆型号" name="carModel">
                  <a-input v-model:value="formState.carModel" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="车牌号" name="licensePlateNum">
                  <a-input v-model:value="formState.licensePlateNum" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="车架号" name="carNum">
                  <a-input v-model:value="formState.carNum" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="发动机号" name="engineNum">
                  <a-input v-model:value="formState.engineNum" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="抵押模式" name="mortgageModel">
                  <a-select allowClear v-model:value="formState.mortgageModel">
                    <a-select-option v-for="(item, index) in typeOptions.options4" :value="item.codeValue"
                      :key="item.codeValue">
                      {{ item.codeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="业务条线" name="businessLine">
                  <a-select allowClear v-model:value="formState.businessLine">
                    <a-select-option v-for="(item, index) in typeOptions.options5" :value="item.codeValue"
                      :key="item.codeValue">
                      {{ item.codeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="登记证照片" name="registrationCertificatePhoto">
                  <a-upload v-model:file-list="formState.fileList" disabled list-type="picture-card">
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <div class="tips">
                  其他信息
                </div>
              </a-col>
              <a-col :span="8">
                <a-form-item label="签收人" name="signer">
                  <a-input v-model:value="formState.signer" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="签收日期" name="signTime">
                  <a-input v-model:value="formState.signTime" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="审核状态" name="reviewStatus">
                  <a-select allowClear v-model:value="formState.reviewStatus">
                    <a-select-option v-for="(item, index) in typeOptions.options6" :value="item.codeValue"
                      :key="item.codeValue">
                      {{ item.codeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="不通过原因" name="reviewReason">
                  <a-select allowClear v-model:value="formState.reviewReason">
                    <a-select-option v-for="(item, index) in typeOptions.options7" :value="item.codeValue"
                      :key="item.codeValue">
                      {{ item.codeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="是否瑕疵" name="isFlaw">
                  <a-select allowClear v-model:value="formState.isFlaw">
                    <a-select-option v-for="(item, index) in typeOptions.options8" :value="item.codeValue"
                      :key="item.codeValue">
                      {{ item.codeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="瑕疵内容" name="flawContent">
                  <a-input v-model:value="formState.flawContent" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="审核人" name="approver">
                  <a-input v-model:value="formState.approver" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="审核日期" name="approveTime">
                  <a-input v-model:value="formState.approveTime" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="入库人" name="warehouseUser">
                  <a-input v-model:value="formState.warehouseUser" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="入库日期" name="warehouseTime">
                  <a-input v-model:value="formState.warehouseTime" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="出库人" name="outboundUser">
                  <a-input v-model:value="formState.outboundUser" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="出库日期" name="outboundTime">
                  <a-input v-model:value="formState.outboundTime" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="出库原因" name="outboundReason">
                  <a-select allowClear v-model:value="formState.outboundReason">
                    <a-select-option v-for="(item, index) in typeOptions.options10" :value="item.codeValue"
                      :key="item.codeValue">
                      {{ item.codeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      <template #footer>
        <div class="modal-btns">
          <div class="modal-btn">
            <a-button @click="cancel('details')">关闭</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <a-modal v-model:open="modalOpen.open3" style="width: 50%" title="档案操作记录" :maskClosable="false" :closable="false">
      <div class="modal-body">
        <div class="table">
          <a-table bordered :dataSource="tableData.recordDataSource" :columns="tableData.recordColumns"
            :pagination="{ total: tableData.recordDataSource.length, showTotal: total => ` 总条数:${total}条` }">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'createdBy'">
                <span>
                  {{ record.createdByName }}
                </span>
              </template>
              <template v-if="column.key === 'eventNode'">
                <template v-for="item in typeOptions.options14">
                  <span v-if="record.eventNode == item.codeValue" style="text-align:center;" color="#f50">{{
                    item.codeName }}</span>
                </template>
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <template #footer>
        <div class="modal-btns">
          <div class="modal-btn">
            <a-button @click="cancel('record')">关闭</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <div class="shade" v-show="spin">
      <a-spin size="large" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, reactive } from "vue";
import { CaretDownOutlined } from "@ant-design/icons-vue";
import { inHome } from "@/api/retailStored";
import { downloadFile, dedup } from "@/utils/index";
import {
  getList, boxIdList, filesOperationRecord, downloadTable
} from "@/api/commerStored";
import { getQueryAll, getStashList, getStashListInfo, previewFiles } from "@/api/common";
import { getUserInfo } from '@/api/login';
import { message } from 'ant-design-vue';
import { MATERIAL } from '@/utils/config';

const spin = ref(false);
const queryParams = ref({
  pageNumber: 1,
  pageSize: 10
});
const formRef = ref({});
const modalOpen = reactive({
  open1: false,
  open2: false,
  open3: false,
});
const typeOptions = reactive({
  options1: [],
  options2: [],
  options3: [],
  options4: [],
  options5: [],
  options6: [],
  options7: [],
  options8: [],
  options9: [],
  options10: [],
  options11: [],
  options12: [],
  options13: [],
  options14: []
})
const tableData = reactive({
  dataSource: [],
  allDataSource: [],
  modalDataSource: [],
  modalColumns: [
    {
      title: "序号",
      dataIndex: "index",
      key: "index",
      width: 80,
      align: "center",
    },
    {
      title: "合同号",
      dataIndex: "contractNum",
      key: "contractNum",
    },
    {
      title: "承租人",
      dataIndex: "lesseeName",
      key: "lesseeName",
    },
    {
      title: "业务类型",
      dataIndex: "serviceType",
      key: "serviceType",
      width: 90,
      align: "center",
    },
    {
      title: "渠道描述",
      dataIndex: "channelDesc",
      key: "channelDesc",
    },
    {
      title: "业务模式",
      dataIndex: "serviceMode",
      key: "serviceMode",
      width: 90,
      align: "center",
    },
    {
      title: "入池时间",
      dataIndex: "enterPoolTime",
      key: "enterPoolTime",
      width: 160,
      align: "center",
    },
    {
      title: "操作",
      key: "action",
      width: 200,
      fixed: "right",
    },
  ],
  recordDataSource: [],
  recordColumns: [
    {
      title: "节点名称",
      dataIndex: "eventNode",
      key: "eventNode",
      width: 120
    },
    {
      title: "操作时间",
      dataIndex: "createdTime",
      key: "createdTime",
      width: 160,
      align: "center",
    },
    {
      title: "操作人",
      dataIndex: "createdBy",
      key: "createdBy",
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
    }
  ],
  loading: false,
  total: 0,
  expand: -1
});
interface FormState {
  registrationCertificatePhoto: any;
  stashId: any;
  frameNum: any;
  rowNumId: any;
  [props: string]: string | number | Array<object> | Array<string>;
};
let formState: FormState = reactive({
  registrationCertificatePhoto: "",
  stashId: null,
  frameNum: null,
  rowNumId: null
});
const configData = computed(() => {
  let config = {
    itemConfig: [
      {
        type: "input",
        prop: "contractNum",
        allowClear: "关闭",
        label: "合同编号",
        placeholder: "请输入",
      },
      {
        type: "input",
        prop: "caseNum",
        allowClear: "关闭",
        label: "盒号",
        placeholder: "请输入",
      },
      {
        type: "input",
        prop: "partNum",
        allowClear: "关闭",
        label: "件号",
        placeholder: "请输入",
      },
      {
        type: "input",
        prop: "carNum",
        allowClear: "关闭",
        label: "车架号",
        placeholder: "请输入",
      },
    ],
    operate: [
      {
        icon: "",
        type: "primary",
        name: "查询",
        handleClick: getLoad,
        rule: true,
      },
      {
        icon: "",
        type: "primary",
        name: "重置",
        handleClick: reset,
        rule: true,
      },
      {
        icon: "",
        type: "primary",
        name: "导出",
        handleClick: exportData,
        rule: true,
      }
    ],
    rules: {},
  };
  return config;
});
const rules = computed(() => {
  let rules = {
    stashId: [{ required: true, message: "请选择", trigger: "blur" }],
  };
  return rules;
});
function stashChange(e: number) {
  getStashListInfo({ stashId: e }).then((res: any) => {
    typeOptions.options12 = dedup(res, 'frameNum');
  })
  formState.frameNum = null;
  formState.rowNumId = null;
}
function frameNumChange(e: number) {
  getStashListInfo({ stashId: formState.stashId, frameNum: e }).then((res: any) => {
    typeOptions.options13 = res;
  })
  formState.rowNumId = null;
}
function getLoad() {
  tableData.loading = true;
  queryParams.value.pageNumber = 1;
  queryParams.value.pageSize = 10;
  getList({ ...queryParams.value, dataSource: MATERIAL.COMMER, state: MATERIAL.WAREHOUSE, selectPageByCaseVo: { ...queryParams.value, state: MATERIAL.WAREHOUSE, dataSource: MATERIAL.COMMER } }).then((res: any) => {
    if (res && res != true) {
      tableData.allDataSource = res.records.map((it: any) => {
        it['checked'] = false;
        return it;
      });
      tableData.total = res.total;
      tableData.expand = -1;
      tableData.loading = false;
      page();
    } else {
      tableData.dataSource = [];
      tableData.total = 0;
      tableData.expand = -1;
      tableData.loading = false;
    }
  })
}
function page() {
  let list = tableData.allDataSource.slice(((queryParams.value.pageNumber - 1) * 10), (queryParams.value.pageSize + ((queryParams.value.pageNumber - 1) * 10)));
  tableData.dataSource = list;
}
function selectBoxList(row: FormState, index: number) {
  tableData.expand = tableData.expand == index ? -1 : index;
  tableData.loading = true;
  boxIdList({ materialCase: { id: row.caseId } }).then((res: any) => {
    tableData.modalDataSource = res;
    tableData.loading = false;
  })
}
function reset() {
  queryParams.value = {
    pageNumber: 1,
    pageSize: 10,
  };
  getLoad();
}
function exportData() {
  spin.value = true;
  downloadTable({ ...queryParams.value, basicDataVo: { ...queryParams.value, state: MATERIAL.WAREHOUSE }, selectPageByCaseVo: { ...queryParams.value, state: MATERIAL.WAREHOUSE }, dataSource: MATERIAL.COMMER, excelType: MATERIAL.COMMERHOUSEEXPORTTYPE }).then((res: any) => {
    if (res) {
      downloadFile(res, "待入库.xlsx");
    }
    spin.value = false;
  });
}
function currentChange(pageNumber: number, pageSize: number) {
  queryParams.value.pageNumber = pageNumber;
  queryParams.value.pageSize = pageSize;
  page();
}
async function handleChange(row: any = {}, type: string) {
  switch (type) {
    case "inHome":
      formState = Object.assign(formState, row);
      modalOpen.open1 = true;
      break;
    case "inHomeOk":
      formRef.value
        .validate()
        .then(() => {
          inHome({ dataSource: MATERIAL.COMMER, basicDataVo: { ...formState }, ...formState, stashDetail: { ...formState, id: formState.rowNumId }, state: MATERIAL.INHOUSE, materialCase: { id: formState.caseId } }).then((res: any) => {
            if (res) {
              message.success("入库成功");
              getLoad();
            }
            cancel('inHome');
          })
        });
      break;
    case "details":
      spin.value = true;
      formState = Object.assign(formState, row);
      if (formState.registrationCertificatePhoto) {
        let ids = formState.registrationCertificatePhoto.split(",");
        let fileList = [] as Array<object>;
        for (const key in ids) {
          await previewFiles({ resourceId: ids[key] }).then((res: any) => {
            if (res) {
              fileList.push({
                uid: res,
                name: res,
                url: res,
                status: 'done',
                preview: res,
                thumbUrl: res,
                response: {
                  data: ids[key],
                  status: {
                    code: 0,
                    msg: "Success"
                  }
                }
              });
            }
          })
        };
        formState['fileList'] = fileList;
      }
      modalOpen.open2 = true;
      spin.value = false;
      break;
    case "record":
      spin.value = true;
      filesOperationRecord({ archivesNum: row.partNum }).then(async (res: any) => {
        for (const key in res) {
          res[key]['createdByName'] = await getUserInfo({ createGlobalUserId: res[key]['createdBy'] });
        }
        tableData.recordDataSource = res;
        modalOpen.open3 = true;
        spin.value = false;
      })
      break;
    default:
      break;
  }
}
function cancel(type: string) {
  switch (type) {
    case "inHome":
      modalOpen.open1 = false;
      for (const key in formState) {
        delete formState[key];
      }
      formState['fileList'] = [];
      formState['registrationCertificatePhoto'] = "";
      formState['rowNumId'] = null;
      formState['frameNum'] = null;
      break;
    case "details":
      modalOpen.open2 = false;
      for (const key in formState) {
        delete formState[key];
      }
      formState['fileList'] = [];
      formState['registrationCertificatePhoto'] = "";
      formState['rowNumId'] = null;
      formState['frameNum'] = null;
      break;
    case "record":
      modalOpen.open3 = false;
      tableData.recordDataSource = [];
      break;
    default:
      break;
  }
}
function getOptionsList() {
  getQueryAll({ codeType: 'serviceType' }).then((res: any) => {
    typeOptions.options1 = res;
  });
  getQueryAll({ codeType: 'serviceMode' }).then((res: any) => {
    typeOptions.options2 = res;
  });
  getQueryAll({ codeType: 'state' }).then((res: any) => {
    typeOptions.options3 = res;
  });
  getQueryAll({ codeType: 'mortgageType' }).then((res: any) => {
    typeOptions.options4 = res;
  });
  getQueryAll({ codeType: 'businessLine' }).then((res: any) => {
    typeOptions.options5 = res;
  });
  getQueryAll({ codeType: 'approveResult' }).then((res: any) => {
    typeOptions.options6 = res;
  });
  getQueryAll({ codeType: 'reviewReason' }).then((res: any) => {
    typeOptions.options7 = res;
  });
  getQueryAll({ codeType: 'isFlaw' }).then((res: any) => {
    typeOptions.options8 = res;
  });
  getQueryAll({ codeType: 'isNormal' }).then((res: any) => {
    typeOptions.options9 = res;
  });
  getQueryAll({ codeType: 'outboundType' }).then((res: any) => {
    typeOptions.options10 = res;
  });
  getStashList().then((res: any) => {
    typeOptions.options11 = res;
  });
  getQueryAll({ codeType: 'eventType' }).then((res: any) => {
    typeOptions.options14 = res;
  });
}
getLoad();
getOptionsList();
</script>
<style lang="less" scoped>
.box-list {
  display: flex;
  flex-direction: column;
  border: solid 1px #f0f0f0;
  border-radius: 8px;
  max-height: 800px;
  overflow-y: auto;

  .box {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    box-shadow: #d5d5d5 0 0 3px 1px;

    &:hover {
      cursor: pointer;
    }

    .head {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border: solid 1px #d5d5d5;
      border-radius: 5px;

      .left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .check {
          margin-right: 10px;
        }
      }

      .right {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .num {
          margin: 0 20px;
        }

        .status {
          color: #f05a23;
        }
      }
    }
  }
}

.table-tips {
  text-align: center;
  font-size: 14px;
  line-height: 100px;
  color: rgba(0, 0, 0, 0.25);
}
</style>
